<template>
    <div>
        <div class='crumbs'>
            <el-breadcrumb separator='/'>
                <el-breadcrumb-item>
                    <i class='el-icon-lx-cascades'></i> 教师信息
                </el-breadcrumb-item>
            </el-breadcrumb>
        </div>
        <div class='container'>
            <div class='handle-box'>
                <el-select clearable v-model='query.profession' placeholder='按职称查找' class='handle-select mr10'>
                    <template v-for='item in professions'>
                        <el-option key='1' :label='item' :value='item'></el-option>
                    </template>
                </el-select>
                <el-button type='warning' icon='el-icon-lx-filter' @click='handleFilter' class='btn'></el-button>
                <div style='width: 20px; display: inline-block'></div>
                <el-input v-model='query.name' placeholder='姓名' class='handle-input mr10'></el-input>
                <el-button type='warning' icon='el-icon-search' @click='handleFilter' class='btn'>
                </el-button>
                <el-button type='warning' icon='el-icon-refresh' @click='load_status' style='position: absolute; right: 60px' class='btn'></el-button>
                <teacher-form @onSubmit='load_status()' ref='edit'
                               style='display: inline-block; padding: 10px'></teacher-form>
            </div>
            <el-table
                :data='tableData'
                border
                class='table'
                ref='multipleTable'
                header-cell-class-name='table-header'
                @selection-change='handleSelectionChange'
            >
                <el-table-column prop='id' label='教工编号' width='105' align='center'></el-table-column>
                <el-table-column prop='name' label='姓名'></el-table-column>
                <el-table-column prop='sex' label='性别'></el-table-column>
                <el-table-column prop='age' label='年龄'></el-table-column>
                <el-table-column prop='tel' label='联系方式'></el-table-column>
                <el-table-column prop='profession' label='职务'></el-table-column>
                <el-table-column>
                    <template #default='scope'>
                        <el-button type='warning'
                                   @click='editTeacher(scope.row)'
                                   class='btn'>
                            <div style='font-family: "黑体"; font-size: 10px'
                            >更新
                            </div>
                        </el-button>
                    </template>
                </el-table-column>
                <el-table-column>
                    <template #default='scope'>
                        <el-button type='danger'
                                   @click='formVisible2=true; id = scope.row.id; deleteName = scope.row.name'
                                   class='btn'>
                            <div style='font-family: "黑体"; font-size: 10px'
                            >删除
                            </div>
                        </el-button>
                        <el-dialog title='提示' :visible.sync='formVisible2' :append-to-body='true'
                                   width='30%'>
                            确认删除{{ deleteName }}吗？
                            <div slot='footer' class='dialog-footer'>
                                <el-button type='info' @click='formVisible2 = false' class='btn'
                                           style='background-color: #8c939d'>取 消
                                </el-button>
                                <el-button type='warning' @click='handleDelete' class='btn'>确 认</el-button>
                            </div>
                        </el-dialog>
                    </template>
                </el-table-column>
            </el-table>
            <div class='pagination'>
                <el-pagination
                    background
                    layout='total, prev, pager, next'
                    :current-page='query.pageIndex'
                    :page-size='query.pageSize'
                    :total='pageTotal'
                    @current-change='handlePageChange'
                ></el-pagination>
            </div>
        </div>
    </div>
</template>

<script>
// import CodeDetail from '@/components/common/CodeDetail';
import Qs from 'qs';
import TeacherForm from '@/components/common/TeacherForm';

export default {
    name: 'teacher',
    data() {
        return {
            query: {
                profession: '',
                name: '',
                pageIndex: 1,
                pageSize: 10
            },
            tableData: [],
            professions: [],
            multipleSelection: [],
            delList: [],
            editVisible: false,
            pageTotal: 0,
            form: {},
            idx: -1,
            id: -1,
            formVisible1: false,
            formVisible2: false
        };
    },
    mounted:function(){
        this.load_status()
    },
    // created() {
    //     this.getData();
    // },
    methods: {
        // 获取 easy-mock 的模拟数据
        // getData() {
        //     fetchStatus(this.query).then(res => {
        //         console.log(res);
        //         this.tableData = res.list;
        //         this.pageTotal = res.pageTotal || 50;
        //     });
        // },
        load_status() {
            let _this = this
            this.$axios.get('/teacher-professions').then(resp => {
                if(resp && resp.status === 200) {
                    _this.professions = resp.data
                }
            })
            this.$axios.get('/teacherInfo').then(resp => {
                if(resp && resp.status === 200) {
                    _this.tableData = resp.data
                }
            })
        },
        // 触发搜索按钮
        handleSearch() {
            this.$set(this.query, 'pageIndex', 1);
            this.$axios.get("/status/" + this.query.name + "/person").then(resp => {
                if(resp && resp.status === 200) {
                    this.tableData = resp.data
                }
            })
        },
        handleFilter() {
            this.$set(this.query, 'pageIndex', 1);
            let _this = this
            this.$axios.post("/teacherInfo/filter", Qs.stringify({"name": _this.query.name, "profession": _this.query.profession})).then(resp => {
                if(resp && resp.status === 200) {
                    this.tableData = resp.data
                }
            })
        },
        handleDelete() {
            this.$set(this.query, 'pageIndex', 1);
            let _this = this
            this.$axios.post("/deleteTeacher", Qs.stringify({"id": _this.id})).then(resp => {
                if(resp && resp.status === 200) {
                    this.tableData = resp.data
                }
            })
            this.editVisible = false;
            this.$message.success('删除成功');
            window.location.reload();
        },
        editTeacher(item) {
            this.$refs.edit.dialogFormVisible = true;
            this.$refs.edit.form = {
                id: item.id,
                name: item.name,
                sex: item.sex,
                age: item.age,
                tel: item.tel,
                profession: item.profession,
                password: item.password
            };
        }
    },
    computed: {
        role() {
            return localStorage.getItem("ms_character");
        }
    },
    components: {
        TeacherForm
    }
};
</script>

<style scoped>
.handle-box {
    margin-bottom: 20px;
}

.handle-select {
    width: 120px;
}

.handle-input {
    width: 300px;
    display: inline-block;
}

.table {
    width: 100%;
    /*font-size: 14px;*/
}

.mr10 {
    margin-right: 10px;
}

</style>
